<template >
    <div class="all">
        <div class="gzlb">工作列表</div>
        <el-container class="c6">
            <el-main class="biao6666">
                <div>
                    <el-tabs v-model="activeName" @tab-click="getData()">
                        <el-tab-pane label="员工管理" name="first"></el-tab-pane>
                        <el-tab-pane label="缺陷管理" name="second"></el-tab-pane>
                    </el-tabs>
                </div>

                <div class="block777">
                    <el-pagination @size-change="getData()" @current-change="getData()" :current-page.sync="params.page"
                        :page-size="params.page_size" layout="prev, pager, next, jumper" :total="count">
                    </el-pagination>
                </div>

                <el-input placeholder="请输入工号、姓名、权限进行查询" @change="getData()" prefix-icon="el-icon-search"
                    v-model="params.search" v-if="activeName == 'first'">
                </el-input>

                <el-input placeholder="请输入缺陷进行查询" @change="getData()" prefix-icon="el-icon-search" v-model="params.search"
                    v-if="activeName == 'second'">
                </el-input>

                <div style="display: flex;" class="hang555">

                    <el-table :data="tableData" style="width: 100%" v-show="activeName == 'first'">
                        <el-table-column label="工号" width="300">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.username }}</span>
                            </template>
                        </el-table-column>

                        <el-table-column label="姓名" width="300">
                            <template slot-scope="scope">
                                <el-popover trigger="hover" placement="top">
                                    <p>姓名: {{ scope.row.name }}</p>
                                    <p v-if="scope.row.roles == 0">权限: 管理员</p>
                                    <p v-if="scope.row.roles == 1">权限: 用户</p>
                                    <div slot="reference" class="name-wrapper">
                                        <el-tag size="medium">{{ scope.row.name }}</el-tag>
                                    </div>
                                </el-popover>
                            </template>
                        </el-table-column>

                        <el-table-column label="性别" width="300">
                            <template slot-scope="scope">
                                <el-tag :type="scope.row.sex === '男' ? 'primary' : 'danger'" disable-transitions>{{
                                    scope.row.sex }}</el-tag>
                            </template>
                        </el-table-column>


                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button type="text" @click="dialogVisible_person = true, get_one(scope.row)"
                                    icon="el-icon-user-solid">编辑</el-button>
                            </template>
                        </el-table-column>

                    </el-table>
                    <el-dialog title="表单弹框" :visible.sync="dialogVisible_person" width="30%">
                        <el-form ref="form" :model="form" label-width="80px">
                            <el-form-item label="工号">
                                <el-input v-model="form.number" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="姓名">
                                <el-input v-model="form.name" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="权限">
                                <el-select v-model="form.roles" placeholder="请选择">
                                    <el-option label="管理员" value="0"></el-option>
                                    <el-option label="用户" value="1"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisible_person = false">取 消</el-button>
                            <el-button type="primary" @click="dialogVisible_person = false, update_person()">更新</el-button>
                        </span>
                    </el-dialog>

                    <el-table :data="tableData" style="width: 100%" v-show="activeName == 'second'">

                        <el-table-column label="缺陷名称" width="180">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.shortage }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button type="text" @click="dialogVisible_shortage = true, get_shortage(scope.row)"
                                    icon="el-icon-s-release">编辑</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <el-dialog title="表单弹框" :visible.sync="dialogVisible_shortage" width="30%">
                        <el-form ref="form" :model="form_s" label-width="80px">
                            <el-form-item label="缺陷">
                                <el-input v-model="form_s.shortage"></el-input>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisible_shortage = false">取 消</el-button>
                            <el-button type="primary"
                                @click="dialogVisible_shortage = false, updateShortage()">更新</el-button>
                        </span>
                    </el-dialog>
                </div>

            </el-main>
        </el-container>
    </div>
</template>



<script>
import { getPersonList, getShortageList, updatePerson, updateShortage } from '@/api/table'



export default {

    mounted() {
        this.getPersonList();
    },



    methods: {
        getPersonList() {
            getPersonList(this.params).then(response => {
                this.tableData = response.data.results;
                this.count = response.data.count
            })
        },

        getShortageList() {
            getShortageList(this.params).then(response => {
                this.tableData = response.data.results;

                this.count = response.data.count;
            })
        },

        getData() {
            if (this.activeName == "first") {
                this.getPersonList();
            } else
                this.getShortageList();
        },

        get_one(person) {
            this.form.id = person.id;
            this.form.number = person.username;
            this.form.name = person.name;

            if (person.roles == '0') {
                this.form.roles = '管理员';
            }
            else {
                this.form.roles = '用户';
            }

        },

        update_person() {
            this.id.roles = parseInt(this.form.roles);
            updatePerson(this.form.id, this.id).then(response => {

                this.$message({
                    message: '更新成功',
                    type: 'success'
                });

                this.getPersonList();
            })
        },

        get_shortage(shortage) {
            this.form_s.shortage = shortage.shortage;
            this.form_s.id = shortage.id;
        },

        updateShortage() {
            updateShortage(this.form_s.id, this.form_s).then(response => {
                this.$message({
                    message: '更新成功',
                    type: 'success'
                });

                this.getShortageList();
            })
        }
    },

    data() {
        return {
            tableData: [],
            params: {
                'page': 1,
                'page_size': 9,
                'search': '',
            },
            count: 0,
            activeName: 'first',
            dialogVisible_person: false,
            dialogVisible_shortage: false,
            form: {
                id: '',
                username: '',
                number: '',
                roles: '',
            },
            id: {
                roles: 0,
            },
            form_s: {
                id: '',
                shortage: '',
            },
        }
    },
}
</script>

<style scoped >
.hang555 {
    padding-top: 15px;
    width: 99.8%;

}

.c6 {
    width: 150%;
}

.block777 {
    max-width: 30%;
}

.biao6666 {
    max-width: 50%;
    margin-left: 9%;

}


.el-tabs__item {
    font-size: 18px !important;
}

.all {
    background-color: rgb(241, 243, 243);

    min-height: 94.8vh;

}

.gzlb {
    text-align: center;
    color: rgb(65, 66, 66);
    font-weight: bolder;
    font-size: 300%;
    font-family: "KaiTi";
    border-bottom: 1px solid rgb(80, 80, 80);
}
</style>